<template>
	<div class="mc-radio">
		<RadioGroup
			v-if="optionType === 'default'"
			v-model="innerValue"
			:size="size"
			:disabled="disabled"
		>
			<p
				v-for="(item, i) in options"
				:key="i"
				:class="
					direction === 'vertical'
						? border
							? 'select-border'
							: 'select-item'
						: 'select-horizontal'
				"
			>
				<Radio
					:label="item[props.value]"
					:border="border"
					:disabled="item.disabled"
				>
					{{item[props.label]}}
				</Radio>
			</p>
		</RadioGroup>
		<RadioGroup
			v-else
			v-model="innerValue"
			:size="size"
			:disabled="disabled"
		>
			<template v-if="direction == 'horizontal'">
				<RadioButton
					v-for="(item, i) in options"
					:key="i"
					:label="item[props.value]"
					:border="border"
				>
					{{item[props.label]}}
				</RadioButton>
			</template>
			<template v-else>
				<p
					v-for="(item, i) in options"
					:key="i"
					class="vertical-button"
				>
					<RadioButton
						:label="item[props.value]"
						:border="border"
					>
						{{item[props.label]}}
					</RadioButton>
				</p>
			</template>
		</RadioGroup>
	</div>
</template>
<script>
import {RadioGroup, Radio, RadioButton} from 'element-ui';
export default {
	name:'McRadio',
	components:{RadioGroup, Radio, RadioButton},
	props:{
		value:{
			default:undefined,
			type:String,
		},
		options:{
			type:Array,
			default: () => [],
		},
		direction:{
			type:String,
			default:'horizontal',
		},
		border:{
			type:Boolean,
			default:false,
		},
		size:{
			type:String,
			default:'small',
		},
		optionType:{
			type:String,
			default:'small',
		},
		disabled:{
			type:Boolean,
			default:false,
		},
		props:{
			type:Object,
			default: () => ({value:'id', label:'fullName'}),
		},
	},
	data(){
		return {
			innerValue:this.value,
		};
	},
	watch:{
		innerValue(val){
			this.$emit('input', val);
			this.$emit('change', val);
		},
		value:{
			handler(val){
				this.innerValue = val;
			},
			immediate:true,
		},
	},
	mounted(){},
	methods:{},
};
</script>
<style lang="scss" scoped>
.mc-radio {
    .select-item {
        display: block;
        margin: 10px 0;
    }
    .select-border {
        display: block;
        margin: 8px 0;
    }
    .select-horizontal {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        margin-right: 20px;
    }
    .vertical-button {
        margin: 5px 0;
    }
}
</style>